<template>
  <view class="category-page">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-box" @click="goToSearch">
        <input 
          placeholder="搜索手工艺品..." 
          readonly
          @click="goToSearch"
        />
        <text class="icon-search">🔍</text>
      </view>
      <view class="cart-box" @click="goToCart">
        <image src="/static/tabbar/shop.png" class="cart-icon"/>
        <text class="cart-badge" v-if="cartCount > 0">{{cartCount}}</text>
      </view>
    </view>

    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 左侧分类导航 -->
      <scroll-view class="left-nav" scroll-y>
        <view 
          v-for="item in navItems" 
          :key="item.id"
          class="nav-item"
          :class="{ active: activeNav === item.id }"
          @click="changeCategory(item.id)"
        >
          {{item.name}}
        </view>
      </scroll-view>

      <!-- 右侧内容区 -->
      <scroll-view class="right-content" scroll-y>
        <!-- 轮播图 -->
        <swiper class="banner-swiper" autoplay circular indicator-dots>
          <swiper-item v-for="(item, index) in banners" :key="index">
            <image :src="item.image" mode="aspectFill" class="banner-img"/>
          </swiper-item>
        </swiper>

        <!-- 商品列表 -->
        <view class="product-list">
          <view 
            v-for="product in currentProducts" 
            :key="product.id"
            class="product-item"
            @click="goToDetail(product.id)"
          >
            <image :src="product.image" mode="aspectFill" class="product-img"/>
            <view class="product-info">
              <text class="product-name">{{product.name}}</text>
              <text class="product-price">¥{{product.price}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeNav: 1, // 当前选中的导航项
      cartCount: 3, // 购物车数量
      navItems: [
        { id: 1, name: '为你推荐' },
        { id: 2, name: '品牌墙' },
        { id: 3, name: '绘画类' },
        { id: 4, name: '塑作类' },
        { id: 5, name: '剪刻类' },
        { id: 6, name: '印染类' }
      ],
      banners: [
        { image: '/static/banners/banner1.jpg' },
        { image: '/static/banners/banner2.jpg' }
      ],
      products: {
        1: [
          { id: 101, name: '精选推荐商品1', price: 128, image: '/static/products/1.jpg' },
          { id: 102, name: '热门推荐商品2', price: 198, image: '/static/products/2.jpg' }
        ],
        2: [
          { id: 201, name: '知名品牌商品1', price: 299, image: '/static/products/3.jpg' },
          { id: 202, name: '设计师品牌2', price: 399, image: '/static/products/4.jpg' }
        ],
        3: [
          { id: 301, name: '水墨画作品', price: 599, image: '/static/products/5.jpg' },
          { id: 302, name: '油画创作', price: 799, image: '/static/products/6.jpg' }
        ],
        // 其他分类数据...
      }
    }
  },
  computed: {
    currentProducts() {
      return this.products[this.activeNav] || []
    }
  },
  methods: {
    // 切换分类
    changeCategory(id) {
      this.activeNav = id
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    
    // 跳转搜索页
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/index',
        animationType: 'slide-in-right',
        animationDuration: 300
      })
    },
    
    // 跳转购物车
    goToCart() {
      uni.navigateTo({
        url: '/pages/cart/index'
      })
    },
    
    // 跳转商品详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${id}`
      })
    }
  }
}
</script>

<style scoped>
/* 整体布局 */
.category-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  padding: 15rpx 20rpx;
  background: #fff;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-box {
  flex: 1;
  height: 70rpx;
  background: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.search-box input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.icon-search {
  position: absolute;
  right: 20rpx;
  color: #999;
}

.cart-box {
  width: 80rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 20rpx;
}

.cart-icon {
  width: 50rpx;
  height: 50rpx;
}

.cart-badge {
  position: absolute;
  right: 5rpx;
  top: 5rpx;
  background: #e54d42;
  color: white;
  border-radius: 50%;
  width: 30rpx;
  height: 30rpx;
  font-size: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 主体内容布局 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧导航 */
.left-nav {
  width: 180rpx;
  background: #f8f8f8;
}

.nav-item {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  border-left: 6rpx solid transparent;
  margin: 10rpx 0;
  transition: all 0.3s;
}

.nav-item.active {
  color: #42b983;
  font-weight: bold;
  background: #fff;
  border-left-color: #42b983;
}

/* 右侧内容 */
.right-content {
  flex: 1;
  padding: 20rpx;
}

.banner-swiper {
  height: 300rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: 48%;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
}

.product-img {
  width: 100%;
  height: 300rpx;
}

.product-info {
  padding: 15rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 30rpx;
  color: #e54d42;
  font-weight: bold;
  margin-top: 10rpx;
  display: block;
}
</style>